<template>
  <div class="goodsList">
    <div v-show="lodding">loading......</div>
    <ul>
      <li v-for="item in items" v-on:click="itemClick(item)" v-bind:key="item.id">
        <goodsItem  v-bind:key="item.id" :goodsName="item.name" :price="item.price" :img="item.img"></goodsItem>
      </li>
    </ul>
  </div>
</template>

<script>
  import goodsItem from '../components/GoodsItem'
  export default {
    name: 'goodsList',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        items: []
      }
    },
    computed: {
      lodding () {
        return this.items.length === 0
      }
    },
    created () {
      this.$post(this.$Api.API_GOODS_LIST).then(res => {
          this.items = res.data;
      }, err => {
          alert(err.message)
      })
    },
    components: {goodsItem},
    methods: {
      itemClick (item) {
        this.$router.push({ path: 'goodsDetail', query: { id: item.id}})

        //动态参数
        //this.$router.push({ name: 'goodsDetail', params: { id: item.id}})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

ul{
  overflow:hidden;
}

ul li{
  float:left;
  list-style-type:none;
  border: solid 1px blueviolet;
}

div .goodsList{
    border: solid 2px black;
}
</style>
